<template>
  <span style="border: 0 solid #1f2d3d;padding: 0 10px;border-radius: 5px;">
    <span>{{ code }}</span>
    <el-tooltip class="item" effect="dark" content="点击复制到剪切板" placement="top-start">
      <el-button link v-clipboard:copy="code" v-clipboard:success="onCopy" v-clipboard:error="onError">
        <svg-icon icon-class="copy"/>
      </el-button>
    </el-tooltip>
  </span>
</template>

<script setup>
import {computed} from "vue";
import {isNullOrUndefinedOrEmpty, notifyError, notifySuccess} from "@/config/common";

const props = defineProps({
  code: {
    type: String,
    default: null,
  },
})

const str = computed(() => {
  const val = props.code
  if (isNullOrUndefinedOrEmpty(val)) {
    return ''
  }
  return val
})

function onCopy(e) {
  console.debug(e)
  notifySuccess('内容已复制到剪切板')
}

function onError(e) {
  console.debug(e)
  notifyError('发生错误，复制失败！')
}
</script>
